<template>
  <div class="xue-mf-layout--content">
    <div class="xue-mf-layout--content--header">
      <div class="xue-mf-layout--content--header--place"></div>
      <el-button
        class="xue-mf-layout--content--header--btn"
        type="text"
        icon="el-icon-copy-document"
        @click="showForm"
        >查看表单</el-button
      >
      <el-button
        class="xue-mf-layout--content--header--btn"
        type="text"
        icon="el-icon-view"
        @click="showJSON"
        >查看JSON</el-button
      >
    </div>
    <xue-form-box class="xue-mf-layout--content--form" :formData="formData">
      <draggable
        class="xue-mf-layout--content--draggable"
        v-model="formData.formDataList"
        group="TpFormGroup"
        animation="300"
      >
        <which-component
          v-for="li in formData.formDataList"
          :key="li.fieldId"
          :data="li"
          @click.native="clickComponent(li)"
        ></which-component>
      </draggable>
    </xue-form-box>
    <el-dialog title="查看表单" :visible.sync="showFormVisible" width="600px">
      <!-- 全局注册的showForm组件 -->
      <xue-form
        v-if="showFormVisible"
        :formData="form"
        ref="formBox"
      ></xue-form>

      <span slot="footer">
        <el-button @click="showFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看JSON" :visible.sync="showJSONVisible" width="600px">
      <json-viewer
        v-if="showJSONVisible"
        :value="json"
        :expand-depth="2"
      ></json-viewer>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import XueFormBox from '../componentList/common/FormBox'
import WhichComponent from '../componentList/WhichComponent.vue'
import JsonViewer from 'vue-json-viewer'
import _ from 'lodash'
export default {
  name: 'Content',
  components: { draggable, XueFormBox, WhichComponent, JsonViewer },
  inject: ['formData'],
  formStyle: {
    hideLabel: false,
    labelWidth: '85px',
    labelPosition: 'right',
    showRequiredAsterisk: true,
    showVerificationMessage: true,
    size: 'medium',
    labelSuffix: ':',
  },
  model: {},
  data() {
    return {
      showFormVisible: false,
      showJSONVisible: false,
      json: '{}',
      form: {},
    }
  },
  // watch  监听formDataList变化，每变化一次就会触发父组件change事件
  // draggable v-model="formData.formDataList" 就是拿到了复制后的值组成的数组
  watch: {
    'formData.formDataList': {
      handler(v) {
        console.log(this.formData.formDataList)
        this.$emit('change', v)
      },
      deep: true,
    },
  },
  methods: {
    submit() {
      this.$refs['formBox'].doValidateForm()
      console.log(this.formData.validate)
      if (!this.formData.validate) return
      console.log(this.formData, this.formData.model)
      // this.showFormVisible = false

      console.log('TpForm')
    },
    clickComponent(item) {
      this.formData.formDataList.forEach((f) => {
        // 每个formDataList项里边存在自己的setting
        if (f.name === 'Layout') {
          f.setting.colList.forEach((c) => {
            if (c) {
              console.log('abc:', c)
              c && (c.makeStyle.active = false)
            }
          })
        }
        // 两个对象地址比较是同一个激活
        if (f === item) f.makeStyle.active = true
        else f.makeStyle.active = false
      })
      this.$emit('select-change', item)
    },
    showForm() {
      this.form = this.$parent.$getFormDataByVueSet()
      this.showFormVisible = true
      // this.$store.state.formData = this.formData;
      // this.$router.push('/show')
    },
    showJSON() {
      this.json = this.$parent.$getFormDataByVueSet()
      this.showJSONVisible = true
    },
  },
}
</script>
